<template>

  <div>
    <sky-dialog v-model="dialog" title="标题" :close="close">
      <template #body>
        内容......
      </template>
      <template #footer>
        <el-button type="primary">确定</el-button>
        <el-button @click="dialog = false">取消</el-button>
      </template>
    </sky-dialog>

    <sky-panel title="关闭拦截">
      <template v-slot:main>

        <el-button type="primary" style="margin-bottom:20px" @click="dialog = true">打开弹框</el-button>

      </template>
    </sky-panel>

    <sky-code-panel>
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
        <code class="html">

        &lt;sky-dialog  v-model="dialog"  title="标题" :close="close"&gt;
          &lt;template #body&gt;
            内容......
          &lt;/template&gt;
          &lt;template #footer&gt;
            &lt;el-button type="primary"&gt;确定&lt;/el-button&gt;
            &lt;el-button @click="dialog = false"&gt;取消&lt;/el-button&gt;
          &lt;/template&gt;
        &lt;/sky-dialog&gt;

        &lt;el-button type="primary" @click="dialog = true"&gt;打开弹框&lt;/el-button&gt;

          
        </code>
        <code class="javascript">
        import { defineComponent, ref } from "vue";

        export default defineComponent({
          setup() {
            const dialog = ref(false);

            const close = (cb) => {
              
            };
            return {
              dialog,
              close,
            };
          },
        });
        </code>
    </pre>
      </div>
    </sky-code-panel>

  </div>

</template>

<script lang="ts">
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    setup() {
      const dialog = ref(false);

      const close = (cb) => {};
      return {
        dialog,
        close,
      };
    },
  });
</script>

